<template>
	<view>
		<u-navbar title="发票申请" :placeholder="true" :autoBack="true">
		</u-navbar>
		<!-- <view class="tips">
			注意：请务必保证开票信息无误，否则无法回复重新开票！
		</view> -->
		<view class="page">
			<view class="form">
				<u--form labelPosition="left" labelWidth="auto" :model="form" :rules="rules" ref="uForm">
					<u-form-item label="抬头类型：" prop="typeIsCompany" required>
						<u-radio-group v-model="form.typeIsCompany" iconSize="22" size="22" style="font-weight: bold;"
							@change="()=>{ form.invoiceLine = null }">
							<u-radio :customStyle="{marginBottom: '8px'}" label="单位" :name="true"></u-radio>
							<u-radio :customStyle="{marginBottom: '8px'}" label="个人" :name="false" v-if="params.payType == 1">
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="发票类型：" prop="invoiceLine" required>
						<!-- 发票类型 p:普票 b:专票 -->
						<u-radio-group v-model="form.invoiceLine" iconSize="22" size="22" style="font-weight: bold;">
							<u-radio :customStyle="{marginBottom: '8px'}" label="普票" name="p"></u-radio>
							<u-radio :customStyle="{marginBottom: '8px'}" label="专票" name="b"
								v-if="form.typeIsCompany == true"></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="抬头名称：" prop="organizationName" required>
						<u--textarea v-model="form.organizationName" style="border: none;" :disabled="params.payType == 2"
							placeholder="请输入抬头名称" autoHeight></u--textarea>
					</u-form-item>
					<view style="font-size: 14px;color: red;margin-left: 10rpx;"><text>请仔细核对带入的名称，如有不符请手动修改或联系平台人员处理！</text>
					</view>
					<u-form-item label="纳税人识别号：" prop="socialCreditCode" required v-if="form.typeIsCompany == true">
						<u--textarea v-model="form.socialCreditCode" style="border: none;" placeholder="请输入纳税人识别号"
							autoHeight></u--textarea>
					</u-form-item>
					<u-form-item label="发票内容：" prop="content" required>
						<u--textarea v-model="form.content" style="border: none;" disabled placeholder="请输入发票内容"
							autoHeight></u--textarea>
					</u-form-item>
					<u-form-item label="地址：" prop="address" required>
						<u--textarea v-model="form.address" style="border: none;" placeholder="请输入地址" autoHeight></u--textarea>
					</u-form-item>
					<u-form-item label="联系人电话：" prop="phone" required>
						<u--input v-model="form.phone" maxlength="11" border="none" placeholder="请输入联系人电话"></u--input>
					</u-form-item>
					<u-form-item label="开户行：" prop="bank" required>
						<u--textarea v-model="form.bank" style="border: none;" placeholder="请输入开户行" autoHeight></u--textarea>
					</u-form-item>
					<u-form-item label="开户账号：" prop="bankAccount" required>
						<u--textarea v-model="form.bankAccount" style="border: none;" placeholder="请输入开户账号"
							autoHeight></u--textarea>
					</u-form-item>
					<u-form-item label="开票金额：" prop="">
						<view>(合计{{form.orderNum}}个订单)</view>
					</u-form-item>
					<view class="total">
						{{form.sum}}元
					</view>
				</u--form>
			</view>
			<view class="btn">
				<view class="tips">
					<image src="/static/reCharge/uncheck.png" style="width: 40rpx;height: 40rpx;" v-if="!ischecked"
						@click="ischecked = !ischecked" mode="">
					</image>
					<image src="/static/reCharge/check.png" style="width: 40rpx;height: 40rpx;" v-if="ischecked"
						@click="ischecked = !ischecked" mode="">
					</image>
					<view style="margin-left: 20rpx;">请阅读并同意 <text style="color: blue;" @click="rightClick">《开票注意事项》</text>
					</view>
				</view>
				<u-button text="确认开票" style="width: 80%;" color="#152A8B" @click="toList"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ischecked: false,
				form: {
					typeIsCompany: null, //抬头类型
					invoiceLine: null,
					organizationName: "",
					socialCreditCode: "",
					content: "申请服务费",
					address: "",
					phone: "",
					bank: "",
					bankAccount: "",
					orderNum: "",
					sum: "",
					cacheKey: '',
				},
				typeIsCompanyList: [{
						name: '单位',
						value: true
					},
					{
						name: '个人',
						value: false
					}
				],
				invoiceLineList: [{
						name: '普票',
						value: "p"
					},
					{
						name: '专票',
						value: "b"
					}
				],
				params: {},
				currentObj: {},
				rules: {
					// typeIsCompany: [{
					// 	required: true,
					// 	message: '请选择抬头类型',
					// 	trigger: ['blur', 'change']
					// }],
					invoiceLine: [{
						required: true,
						message: '请选择发票类型',
						trigger: ['blur', 'change']
					}],
					organizationName: [{
						required: true,
						message: '请填写抬头名称',
						trigger: ['blur', 'change']
					}],
					socialCreditCode: [{
						required: true,
						message: '请填写纳税人识别号',
						trigger: ['blur', 'change']
					}],
					content: [{
						required: true,
						message: '请填写发票内容',
						trigger: ['blur', 'change']
					}],
					address: [{
						required: true,
						message: '请填写地址',
						trigger: ['blur', 'change']
					}],
					phone: [{
						required: true,
						max: 11,
						message: '请填写联系人电话',
						trigger: ['blur', 'change']
					}],
					bank: [{
						required: true,
						message: '请填写开户行',
						trigger: ['blur', 'change']
					}],
					bankAccount: [{
						required: true,
						message: '请输入开户账号',
						trigger: ['blur', 'change']
					}],
				},
				isReadOnly1: false,
				isReadOnly2: false,
				isReadOnly3: false,
				isReadOnly4: false,
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onLoad(options) {
			if (options) {
				let obj = JSON.parse(options.obj);
				console.log(obj);
				this.currentObj = obj
				if (obj.fapiaoId) {
					this.form = obj;
					this.params.payType = obj.payType;
					this.form.name = uni.getStorageSync("urlParams").name
				} else {
					console.log("obj", obj);
					this.params = JSON.parse(options.params);
					console.log(1, this.currentObj);
					console.log(1, this.params);

					this.form = obj;
					// this.form.bank = obj.saucdepositRecharge.bankBranch;
					// this.form.bankAccount = obj.saucdepositRecharge.bankCardNo;
					this.form.name = uni.getStorageSync("urlParams").name
				}

				if (this.form.organizationName) {
					this.form.organizationName = this.removeTrailingParentheses(this.form.organizationName);
				}
			}
		},
		methods: {
			rightClick() {
				console.log("进入");
				uni.navigateTo({
					url: '/pages/precautions/index?code=kp'
				})
			},
			removeTrailingParentheses(str) {
				return str.replace(/(.*?)([\(（][^\)）]*[\)）])$/, "$1");
			},
			toList() {
				let that = this;
				if (!this.ischecked) {
					uni.$u.toast("请阅读并同意开票事项")
					return
				}
				if (this.form.fapiaoId) {
					this.$refs.uForm.validate().then((valid) => {
						if (valid) {
							that.form.payType = that.params.payType;
							if (that.params.payType == 1) {								
								uni.showLoading({
									title: '开票中...',
									mask: true,
								});								
								that.api.reinVoice(that.form).then(res => {
									uni.$u.toast('操作成功');
									uni.hideLoading()
									uni.navigateBack({
										delta: -1
									})
								})
							} else {
								uni.showModal({
									title: '请确认是否继续进行发票申请？',
									content: '请在开票前仔细阅读注意事项！',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											uni.showLoading({
												title: '开票中...',
												mask: true,
											});											
											that.api.reinVoice(that.form).then(res => {
												uni.$u.toast('操作成功');
												uni.hideLoading()
												uni.navigateBack({
													delta: -1
												})
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});

							}

						}
					})
				} else {
					this.$refs.uForm.validate().then((valid) => {
						if (valid) {
							that.form.payType = that.params.payType;
							if (that.params.payType == 1) {
								// return
								uni.showLoading({
									title: '开票中...',
									mask: true,
								});
								that.api.submitFapiaoInfo(that.form).then(res => {
									uni.$u.toast('操作成功');
									uni.hideLoading()
									uni.navigateBack({
										delta: -1
									})
								})
							} else {
								uni.showModal({
									title: '请确认是否继续进行发票申请？',
									content: '请在开票前仔细阅读注意事项！',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											uni.showLoading({
												title: '开票中...',
												mask: true,
											});
											that.api.submitFapiaoInfo(that.form).then(res => {
												uni.$u.toast('操作成功');
												uni.hideLoading()
												uni.navigateBack({
													delta: -1
												})
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});

							}

						}
					})
				}
			},
			/**
			 * @param {Object} type
			 * 切换抬头类型
			 */
			checkHeaderType(type) {
				if (this.params.payType == 2) {
					return
				}
				this.form.typeIsCompany = type;
			},
			/**
			 * @param {Object} type
			 * 切换发票类型
			 */
			checkInvoiceType(type) {
				this.form.invoiceLine = type;
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.page {
		margin: 20rpx;
	}

	::v-deep .u-form-item__body__left__content__label {
		font-weight: bold;
	}

	::v-deep .u-radio {
		margin: 10rpx 25rpx;
	}

	::v-deep .u-textarea--disabled {
		background-color: #fff !important;

	}

	::v-deep .u-textarea__field {
		color: #000 !important;
	}

	.form {
		background-color: #FFFFFF;
		padding: 10px 25px;
		border-radius: 16rpx;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.margin0 {
		margin-left: 100rpx;
	}

	.margin1 {
		margin-left: 20rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.total {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 34rpx;
		color: #FF1212;
		line-height: 48rpx;
	}

	.text {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.rightNacbar {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #152A8B;
		line-height: 42rpx;
	}

	.tips {
		height: 72rpx;
		// background: #FFDFDF;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 24rpx;
		// color: #FF1212;
		line-height: 33rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 15rpx;
	}

	.btn {
		// position: fixed;
		// bottom: 100rpx;
		width: 100%;
		text-align: center;
		// margin: 200rpx 40rpx 20rpx 40rpx;
	}
</style>